<template>
<div class="page">
  <Tabs value="name1">
    <TabPane label="全部消息" name="name1"></TabPane>
    <TabPane :label="label" name="name2"></TabPane>
    <TabPane label="人工消息" name="name3"></TabPane>
  </Tabs>

  <div class="content">
    <div class="search-wrap">
      <div class="message-num">
        <span>全部(7)</span>
        <span>未读(1) </span>
      </div>
      <div>
        <Input search enter-button="搜索" placeholder="Enter something..." />
      </div>
    </div>
    <div class="message-list">
      <div class="message-item" v-for="i in 10">
        <Row>
          <Col span="1">
            <Checkbox v-model="single"></Checkbox>
          </Col>
          <Col span="7">
            <div class="info">
              <div class="radio"></div>
              提交成功
            </div>
          </Col>
          <Col span="6">
            1237343061675595
          </Col>
          <Col span="6">
            2023-11-20 21:39:53
          </Col>
          <Col span="4">
            <span class="btn" @click="modal1 = true">查看详情</span>
          </Col>
        </Row>
      </div>
    </div>
  </div>
  <div class="footer">
    <div>
      <Checkbox v-model="single">
        全选
      </Checkbox>
    </div>
    <Page :total="100" show-sizer />
  </div>

  <Modal
      v-model="modal1"
      class-name="vertical-center-modal"
      title="提交成功"
  >
     <div>
       zhesas;daskdlkalskdlksa
     </div>
    <div slot="footer">
      <span class="pop-footer">2023-11-20 21:39:53</span>
    </div>
  </Modal>
</div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      modal1: false,
      label: (h) => {
        return h('div', [
          h('span', '系统消息'),
          h('Badge', {
            style: {
              "top": '-14px'
            },
            attrs: {
              'dot':"dot"
            }
          })
        ])
      }
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .content {
    padding-bottom: 20px;
    .search-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 24px 0;
      padding-bottom: 16px;
      border-bottom: 1px solid @t-table-border-color;
      .message-num {
        span {
          cursor: pointer;
          margin-right: 24px;
          color: @t-text-color;
          font-size: 14px;
        }
      }
    }
    .message-list {

      .message-item {
        padding: 12px;
        border-bottom: 1px solid @t-table-border-color;
        .info {
          display: flex;
          align-items: center;
        }
        .btn {
          cursor: pointer;
        }
        .radio {
          width: 8px;
          height: 8px;
          margin-right: 4px;
          border-radius: 50%;
          background: @error-color;
        }
      }
    }
  }
  .footer {
    position: sticky;
    bottom: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.08);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #ECECEC;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>